<template>
  <div>
    <h3>扩展型组件</h3>
    <li>{{ msg1 }}</li>
    <div>
      <button @click="show(2, 'aa')">事件</button>
    </div>
    <div ref="bbox">树上的</div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      msg1: "实打实",
    };
  },
  methods: {
    show(arg1: number, arg2: string): void {
      console.log("扩展式组件的实例方法", arg1, arg2);
    },
  },
  mounted(): void {
    console.log(this.$refs)
    console.log("mounted is running");
  },
  watch: {
  	msg1:function(newValue:string, oldValue: string):void{
  		console.log('扩展式组件的实例属性msg1变化', newValue, oldValue)
  	}
  }
});
</script>
